<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置</title>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/elementui.js"></script>
		<link href="../layui/css/layui.css" rel="stylesheet">
		<script src="../layui/layui.js"></script>
		<link rel="stylesheet" href="../css/index.css" />
		<script src="../js/jquery3.5.1.js"></script>
		<link href="../css/setting.css" rel="stylesheet"/>
	</head>
	<body>
		<div id="app">
			<div id="setting_Box" class="settingBox">
				<!--头部-->
				<div class="settingBox_head">
					<span style="position: absolute;font-weight: 600;font-size: 26px; margin: 16px 30px">设置</span>
				</div>
				<!--主体部分-->
				<div class="settingBox_main">
					<!--左侧选项栏-->
					<div class="settingBox_main_left">
						<br />
						<ul>
							<li style="background-color: #3b3d51;">
								<i class="el-icon-lock"></i>
								<span >隐私设置</span>
							</li>
							<li @click="out">
								<i class="el-icon-switch-button"></i>
								<span>退出登录</span>
							</li>
						</ul>
					</div>
					<!--右侧操作框-->
					<div class="settingBox_main_right" id="setChoseOne" >
						<span class="settingBox_headImg">
							<img src="../img/miku.jpg" width="65px" height="65px" style="object-fit: cover; flex: 1; border-radius: 50%;"/>
						</span>
						<p class="settingBox_userName">老公为男小三出走的那个雨夜</p>
						<p style="display: block;text-align: center;margin: 2px 0px; color: lightgray;font-size: 12px;">这只是一个个签</p>
						<div class="settingBox_main_btnBox">
							<div>
								<span style="display: block;padding: 20px 0px;width: 100px;font-size: 16px;">展示个人作品</span>
								<div style="position: absolute; top: 175px;left: 442px;">
									<div class="layui-form" id="showMyWork">
									      <input type="checkbox"  lay-skin="switch">
									</div>
								</div>
								<ul style="padding-left: 0%;">
									<label for="showAll"><li class="li_btn"><input class="radio_type" type="radio" name="myWorkChose" id="showAll"/>全部可见</li></label>
									<label for="someVisible">
										<li class="li_btn">
											<input class="radio_type" type="radio" name="myWorkChose" id="someVisible"/>
											部分可见<i style="left: 465px;position: absolute;font-size: 20px;color: #bdbfc5;" class="el-icon-arrow-right"></i>
										</li>
									</label>
									<label for="someDisvisible">
										<li class="li_btn">
											<input class="radio_type" type="radio" name="myWorkChose" id="someDisvisible"/>
											不给谁看<i style="left: 465px;position: absolute;font-size: 20px;color: #bdbfc5;" class="el-icon-arrow-right"></i>
										</li>
									</label>	
								</ul>
							</div>
						</div>
					</div>
					<!--不给谁看或部分可见-->
					<div class="settingBox_main_right" id="setChoseTwo" style="display: none;">
						<i style="left: 16px;top: 22px;position: absolute;font-size: 20px;color: #bdbfc5;" class="el-icon-arrow-left" onclick="returnSet()"></i>
						<span id="setType" style="display: block;margin: auto;text-align: center;margin-top: 22px;">嘻嘻嘻占位</span>
						<!--搜索框-->
						<div style="border-bottom: 1px solid #373e53; width: 400px; height: 60px; margin: 14px auto;">
							<span style="left: 70px;position: absolute;padding:5.2px 7px;background-color: #292e43;border-radius: 8px 0px 0px 8px;top: 76px;"><i class="el-icon-search"></i></span>
							<input type="text" placeholder="搜索" style="position: absolute;
								color: white;
								outline: none;
								background-color: #292e43;
								border: 1px solid #292e43;
								border-radius: 0px 8px 8px 0px;
								top: 76px;
								left: 100px;
								width: 346px;
								height: 28px;"/>
						</div>
						<div class="friendListBox">
							<ul>
								<li>
									<div class="friendBox">
										<span style="line-height: 90px;">
											<img src="../img/噬魂师.jpg" width="55px" height="55px" style="object-fit: cover; flex: 1; border-radius: 50%;"/>
										</span>
										<span class="friend_name">maka</span>
										<span class="friend_signature">我就改了第一个</span>
										<button class="normalBtn">移除</button>
									</div>
								</li>
								<li>
									<div class="friendBox">
										<span style="line-height: 90px;">
											<img src="../img/噬魂师.jpg" width="55px" height="55px" style="object-fit: cover; flex: 1; border-radius: 50%;"/>
										</span>
										<span class="friend_name">maka</span>
										<span class="friend_signature">我就改了第一个</span>
										<button class="normalBtn">移除</button>
									</div>
								</li>
							</ul>
							<span style="display: block;text-align: center;color: #7d7d7d;font-size: 13px;">暂无列表</span>
						</div>
						<div style="text-align: center;margin: 30px 0px;">
							<button class="finishBtn">完成</button>
						</div>
					</div>
					
				</div>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				value:"false",
				radio: 3
			},
			methods:{
				out(){
					window.localStorage.removeItem("userid")
					window.localStorage.removeItem("useridPY")
					// 在 iframe 内部执行以下代码
					//let parentWindow = window.parent|| window.top;
					
					// 方式 1：直接刷新父页面中的指定 iframe（需父页面 iframe 有 id）
					//let outerIframe = parentWindow.document.getElementById('app');
					//outerIframe.contentWindow.location.reload();
					location.href="../Recommended.html";
				}
			}
		})
	</script>
	<script type="text/javascript">
		function returnSet(){
			$("#setChoseTwo").css("display","none")
			$("#setChoseOne").css("display","block")
		}
		
		$("#setChoseOne li:gt(0)").click(function(){
			$("#setChoseOne").css("display","none")
			$("#setChoseTwo").css("display","block")
			$("#setType").html($(this).text().trim())
		})
		
		$("#showMyWork").click(function(){
			if($(this).children().is(":checked")==false){
				var radios = document.getElementsByName('myWorkChose');
				for (var i = 0; i < radios.length; i++) {
				    radios[i].checked = false;
				}
			}else{
				document.getElementsByName('myWorkChose')[0].checked = true
			}
		})
		
	</script>
</html>